<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>手风琴</title>
  <style>
     * {
      margin: 0;
      padding: 0;
    }
    body{
      background-image: linear-gradient(#666,#fff);
    }
    ul {
      list-style: none;
    }

    div {
      width: 1200px;
      height: 500px;
      margin: 50px auto;
      border: thick double #0c252f;
      overflow: hidden;
    }

    div ul li {
      width: 240px;
      height: 500px;
      float: left;
      transition: all 1s;
    }

    div ul {
      width: 1200px;
    }
  </style>
</head>

<body>
  <div id="box">
    <ul>
      <li>
        <a href="#">
          <img src="./images/1.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/2.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/3.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/4.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/5.jpg" alt="">
        </a>
      </li>
    </ul>
  </div>
</body>
<script>
  //获取li元素
  let lis = document.querySelectorAll('li')
  //遍历
  for(let i=0;i<lis.length;i++){
    //鼠标移入事件
    lis[i].addEventListener('mouseenter',function(){
      for(let j=0;j<lis.length;j++){
        lis[j].style.width='50px'
      }
      this.style.width='1000px'
    })
    //鼠标移出事件
    lis[i].addEventListener('mouseout',function(){
      for(let k=0;k<lis.length;k++){
        lis[k].style.width='240px'
      }
    })
  }


</script>

</html>